<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      header{
             position: relative;
            height: 5000px;
        }  
        .top{
            height: 100px;
            background: pink;
        }
        .cen{
            height: 40px;
            background: blue;
        }
        .bott{
            width: 100%;
            height: 60px;
            /* top:-100%; */
            /* top:-60px; */
            background: yellow;
        }

        .inp{

            height: 20px;
            width: 400px;
            margin: 20px 40%;
            
        }


    </style>
</head>
<body>
        <!-- //淘宝搜索吸顶 -->

    <header>
        <div class="top" id="top"></div>
        <div class="cen" id="cen"></div>
        <div class="bott" id="bott">
            <input type="text" class="inp" id="inp" placeholder="fshjfhajfalfh">
        </div>
    </header>

    <script>
         window.onscroll = function () {
            // bott.style.top = 200;

            // 判断滚动条的距离 如果大于1000 就显示 按钮，小于1000的隐藏按钮
            if (scrollY >= 200) {
                bott.style.position = 'fixed';
                bott.style.top =0 ;
            } else {
                bott.style.position = ''
            }
        }

 /*        var topp = -60;
            window.onscroll = function () {
                if (scrollY >= 200) {
                    bott.style.position = 'fixed';
                    // bott.style.top = 0;
                } else {
                    bott.style.position = ''
                    topp = -60;
                }
            }

        var timer= setInterval(function () {
           if(scrollY >= 200){

            bott.style.top = `${++topp}px`;
                if(topp>=0){
                     clearInterval(timer)
                }
           }   
         console.log(1); 
        }, 50);

 */

    </script>

</body>
</html>